//1. 创建请求对象
let req = new XMLHttpRequest()
//2. 设置请求方法和请求地址
req.open('get','http://127.0.0.1:8080/prices')
//3. 发送请求
req.send()
//4. 等待响应并且处理数据
req.onreadystatechange = function() {
	var obj = JSON.parse(req.responseText)
	var xAxisData = []
	var seriesData = []
	obj.forEach(product => {
		xAxisData.push(product.name)
		seriesData.push(product.price)
	})
	
	if(req.readyState === 4){
		//echart图表：3.配置图表参数
		//3.1 初始化图表，并绑定到容器
		var mychart = echarts.init(document.getElementById('echartMain'))
		// 3.2 设置参数
		var option = {
			xAxis: {
				data:xAxisData,
				name:"食品名称"
			},
			yAxis: {
				name:"食品价格",
				nameTextStyle: {
				      fontStyle: "oblique"
				    }
			},
			series:[
				{
					type:'line',
					data:seriesData
				},{
					type:'bar',
					data:seriesData
				}
			],
			title: {
			    text: "商品价格折线图",
			    subtext: "想你所想",
			    left: "center",
			    top: "center",
			    textStyle: {
			      fontSize: 30
			    },
			    subtextStyle: {
			      fontSize: 20
			    }
			  }
		}
		mychart.setOption(option)
	}
}

